<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>滚动行为</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="generator" content="GitBook 3.2.2">
    <meta name="HandheldFriendly" content="true">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>

<body>
    <div id="app">
        <h1>Scroll Behavior</h1>
        <ul>
            <li>
                <router-link to="/">/</router-link>
            </li>
            <li>
                <router-link to="/foo">/foo</router-link>
            </li>
            <li>
                <router-link to="/bar">/bar</router-link>
            </li>
            <li>
                <router-link to="/bar#anchor">/bar#anchor</router-link>
            </li>
        </ul>
        <router-view class="view"></router-view>
    </div>
    <script type="text/javascript">
    const Home = {
        template: '<div>home</div>'
    }
    const Foo = {
        template: '<div>foo</div>'
    }
    const Bar = {
        template: `
    <div>
      bar
      <div style="height:500px"></div>
      <p id="anchor">Anchor</p>
    </div>
  `
    }

    // scrollBehavior:
    // - only available in html5 history mode
    // - defaults to no scroll behavior
    // - return false to prevent scroll
    const scrollBehavior = (to, from, savedPosition) => {
        if (savedPosition) {
            // savedPosition is only available for popstate navigations.
            return savedPosition
        } else {
            const position = {}
                // new navigation.
                // scroll to anchor by returning the selector
            if (to.hash) {
                position.selector = to.hash
            }
            // check if any matched route config has meta that requires scrolling to top
            if (to.matched.some(m => m.meta.scrollToTop)) {
                // cords will be used if no selector is provided,
                // or if the selector didn't match any element.
                position.x = 0
                position.y = 0
            }
            // if the returned position is falsy or an empty object,
            // will retain current scroll position.
            return position
        }
    }

    const router = new VueRouter({
        // mode: 'history',
        // base: __dirname,
        scrollBehavior,
        routes: [{
            path: '/',
            component: Home,
            meta: {
                scrollToTop: true
            }
        }, {
            path: '/foo',
            component: Foo
        }, {
            path: '/bar',
            component: Bar,
            meta: {
                scrollToTop: true
            }
        }]
    })

    new Vue({
        router
    }).$mount('#app')
    </script>
</body>

</html>
